<template>
  <div class="landform">

    <div>
      
      <div class="about65" v-if="showType==0">
        <div class="ziran acea-row row-center cursor" v-for="(item,index) in list" :key="index" @click.stop="infopath(item)">
            <div class="pic">
              <img class="imgwh" :src="link+item.cover" alt="">
            </div>
            <div class="title mt-15 bold">{{ item.name }}</div>
        </div>
      </div>

      <!-- 双排图文 -->
      <div class="pic-nav acea-row" v-if="showType==3">
        <div class="pic-item cursor" v-for="(item,index) in list" :key="index" @click.stop="infopath(item)">
          <div class="img"> 
            <img class="imgwh" :src="link+item.cover" alt="">
          </div>
            <div class="mt-15 bold line-bot">{{ item.name }}</div>
            <div class="subtitle">{{ item.description }}</div>
          </div>
        </div>
      </div>

    <div style="width:100%;height:3.125rem;"></div>
    <Pagination
        :pageNo="pageNo"
        :pageSize="4"
        :total="total"
        :continues="5"
        :screenWidth="screenWidth" 
        @getPageNo="getPageNo"
    />
    <div style="width:100%;height:3.125rem;"></div>

  </div>
</template>
<script>
import Pagination from './PaginaTion.vue'
export default {
    name: "LandForm",
    props:["showType","","screenWidth"],
    components:{
        Pagination
    },
    data(){
        return {
          link: localStorage.getItem('link'),
          pageNo:1,
          total:'',
          list:[],

        }
    },
    mounted(){
      this.getdata()
    },
    methods:{
      getPageNo(pageNo){
        this.pageNo = pageNo;
        this.getdata()
      },
      getdata(){
        let that = this;
        that._get('/api/portal/web/article/list',{
          cid: this.$route.query.tid,
          pageSize:4,
          pageNum: that.pageNo,
          orderByColumn:'sort_num,publish_time',
          isAsc:'desc'
        }).then(res=>{
          that.list = res.data.rows;
          that.total = res.data.total;
        })
      },
      infopath(item){
       this.$router.push({ path:`/info?id=${item.id}` },()=>{}, ()=>{});
      }
    }
}
</script>
<style lang="scss">
    .about65{
        width: 65%;
        margin: 1.875rem auto;
    }
    .landform{

        .ziran{
            width: 100%;
            margin-bottom: 1.25rem;
            
            .pic{
             height: 38.75rem;
             width: 100%;
            }
      
            .title{
              font-size: 1.125rem;
              color: #1E5A54;
            }
        }

        .pic-nav{
            width: 68%;
            margin: 1.875rem auto;
    
            .pic-item{
              text-align: center;
              font-size: 1rem;
              margin: 0 0 1.25rem 2.5rem;
              
    
              .img{
                width: 37.25rem;
                height: 25.25rem;
              }

              .line-bot{
                padding: 1.25rem 0;
                //min-width: 8.25rem;
                border-bottom: .0625rem solid #1E5A54;
                margin: 0 auto;
                display: inline-block;
              }
              .subtitle{
                width: 33.75rem;
                margin: 0 auto;
                line-height: 1.875rem;
                color: #1E5A54;
                margin-top: 1.25rem;
              }
    
            }
          }

    }
    @media screen and (max-width: 36rem) {

      .landform{
       // width: 90%;

        .pic-nav{
          width: 90%;

          .pic-item{
            margin: 0 0 1.25rem 0;

            .img{
              width: 100%;
              height: auto;
            }

            .subtitle{
              width: 100%;
            }

          }

        }


      }
      
    }

</style>
